<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模块化开发</title>
    <link rel="icon" href="" type="image/x-icon">
</head>

<body>
    <!--
        模块功能主要由两个命令构成： export 和 import 
        export 命令主要是规定模块的对外的接口，输出值
        import 命令主要用于输入其他模块提供的功能
    -->

    <!--
        1、增加type属性，type = "module" ,表明在这个js文件中使用模块化语法
        2、引入模块
        注意：-- 
                import {} from "相对路径或者是模块名"
                引入模块中的几个功能就定义几个变量
                **定义的变量名称必须和导出的变量名一致
    -->

    <!-- 选择导出的属性方法 -->
    <script type="module">
        import { num, obj } from "./logger.js"
        console.log(num)
        console.log(obj, obj.name)
    </script>

    <!-- 导入所有的输出值 -->
    <script type="module">
        import * as allWay from "./logger.js";
        console.log(allWay.num)
        console.log(allWay.obj)
        allWay.fun()
    </script>

    <!-- <script type="module">
        import { num, arr, fun2 } from "./test.js";
        console.log(arr)
    </script> -->


    <!-- 1-增加 type属性  type="module" ，表明 在这个js文件中使用模块化语法 -->
    <script src="./test.js" type="module"></script>
</body>

</html>